<template>
  <div class="customer-task-table-container">
    <div class="action-button-group">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link cur-point">
          {{$t('common.base.moreOperator')}}
          <i class="iconfont icon-fdn-select"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!-- TODO: 埋点枚举待确认 -->
          <el-dropdown-item v-if="exportTaskPermission">
            <div @click="exportTask" v-track="$track.formatParams('EXPORT', null, 'MORE_ACTIONS')">{{$t('common.base.export')}}</div>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="jumpTaskList">{{$t('customer.detail.customerTaskTable.jumpTaskList')}}</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span class="el-dropdown-link cur-point" @click="showAdvancedSetting" v-track="$track.formatParams('SELECT_COLUMN')">
        {{$t('common.base.choiceCol')}}
        <i class="iconfont icon-fdn-select"></i>
      </span>
    </div>
    <el-table
      stripe
      :data="taskList"
      :highlight-current-row="false"
      header-row-class-name="common-list-table-header__v2"
      row-class-name="customer-task-table-row"
      @sort-change="sortChange"
      v-loading="loading"
      class="customer-task-table"
      v-bind="extraAttrs">
      <template slot="empty">
        <BaseListForNoData
          v-show="!loading"
          table-type="smallTable"
          :notice-msg="$t('common.base.tip.noData')"
        ></BaseListForNoData>
      </template>

      <el-table-column
        v-for="(column, index) in columns"
        v-if="column.show"
        :key="`${column.field}_${index}`"
        :label="column.label"
        :prop="column.field"
        :min-width="column.minWidth"
        :width="column.width"
        :sortable="column.sortable"
        :show-overflow-tooltip="getCommonListShowTooltip(column)"
        :align="column.align">
        <template slot-scope="scope">
          <!-- 工单编号 -->
          <div
            v-if="column.field === 'taskNo'"
            :class="{ superscript: scope.row.guideData }"
            class="table-blacklist"
          >
            <a
              href=""
              :class="globalIsHaveTaskViewDetailAuth ? 'view-detail-btn task-list-numbering' : 'view-detail-btn-disabled'"
              @click.stop.prevent="
                openTaskTab(scope.row.id, scope.row[column.field])
              "
            >
              {{ scope.row[column.field] }}
            </a>
            <!-- 质检异常标签 -->
            <span
              class="task-state-block task-state-block-intelligent task-font12"
              v-if="scope.row && scope.row.attribute && scope.row.attribute.intelligentCheckStateStr == 1"
            >
              {{$t('common.task.qualityTestingStatus.abnormal')}}
            </span>
            <!-- TODO: 曾超时 审批中标签 -->
            <!-- 暂停中 -->
            <span v-if="scope.row.inApprove == 1">
              <span
                class="task-state-block task-state-block-quality-approve task-font12"
                v-if="scope.row && scope.row.qualityEntity && scope.row.qualityEntity.inApprove == 1"
              >
                {{$t('common.task.qualityGuarantee.approve')}}
              </span>
              <span v-else class="task-state-block task-state-block-approve task-font12">
                {{$t('common.task.qualityGuarantee.inApprove')}}
              </span>
            </span>
            
            <!-- 异常标签 -->
            <span
              class="task-state-block task-state-block-overtime task-font12"
              :class="{'task-state-block-approve': v === $t('common.task.exceptionStatus.allot') || v === $t('common.task.exceptionStatus.rollback'), 'task-state-block-ff': v === $t('common.task.exceptionStatus.oncePaused') || v === $t('common.task.exceptionStatus.onceOverTime') || v === $t('common.task.exceptionStatus.onceRefused')}"
              v-for="(v, i) in abnormalHover(scope.row)"
              :key="i"
              v-show="i < 2"
            >
              {{v}}
            </span>



            <el-tooltip
              v-if="abnormalHover(scope.row).length > 2"
              :content="abnormalHover(scope.row).join(',')"
              placement="top"
            >
              <span class="task-ml4">...</span>
          </el-tooltip></div>

            <!-- 客户  TODO: 客户查看权限 -->
            <template v-else-if="column.field === 'customer'">
              <div
                :class="{
                  'view-detail-btn task-client': scope.row.linkAuth,
                }"
                @click.stop="openClientTab(scope.row)"
              >
                {{
                  scope.row["customerEntity"] &&
                    scope.row["customerEntity"].name
                }}
              </div>
            </template>
            <!-- 创建方式 -->
            <template v-else-if="column.field === 'source'">
              <span>{{ getSourceLabel(scope.row["source"])}}</span>
            </template>

            <!-- 关联事件 -->
            <template v-else-if="column.field === 'eventNo'">
              <div class="view-detail-btn task-client"
                  @click.stop="openEventTab(scope.row)"
              >
                {{ scope.row["eventNo"]}}
              </div>
            </template>
            <!-- 联系人 -->
            <template v-else-if="column.field === 'tlmName'">
              <div>
                {{ scope.row["linkMan"] && scope.row["linkMan"].name }}
              </div>
            </template>
            <!-- 质保start -->
            <template v-else-if="column.field === 'qualityStartTime'">
              <div>
                {{ scope.row["qualityEntity"] && scope.row["qualityEntity"].qualityStartTime }}
              </div>
            </template>
            <template v-else-if="column.field === 'qualityEndTime'">
              <div>
                {{ scope.row["qualityEntity"] && scope.row["qualityEntity"].qualityEndTime }}
              </div>
            </template>
            <template v-else-if="column.field === 'qualityStatus'">
              <div>
                {{ scope.row["qualityEntity"] && scope.row["qualityEntity"].qualityStatus | qualityStatus }}
              </div>
            </template>
            <!-- 质保end -->
            <!-- 电话 -->
            <template v-else-if="column.field === 'tlmPhone'">
              <div>
                {{ scope.row["linkMan"] && scope.row["linkMan"].phone }}
                <template v-if="scope.row.linkMan && scope.row.linkMan.phone">
                  <i v-if=" hasCallAuth && callCenterModule" class="iconfont icon-fdn-phone" :title="$t('common.base.dial')" @click="makePhoneCall(scope.row['linkMan'].phone, true)"></i>
                </template>
              </div>
            </template>
            <template v-else-if="column.formType === 'phone'">
              <div>
                {{ scope.row.attribute[column.field] }}
                <i
                  v-if="hasCallAuth && callCenterModule && scope.row.attribute[column.field]"
                  class="iconfont icon-fdn-phone"
                  :title="$t('common.base.dial')"
                  @click="makePhoneCall(scope.row.attribute[column.field], false)"
                ></i>
              </div>
            </template>
            <!-- 是否重复报修 -->
            <template v-else-if="column.field === 'isRepeatRepair'">
              <span :style="{color: column.setting.color || '#F4882F'}">{{scope.row.attribute[column.field] || $t('common.base.no')}}</span>
            </template>
            <!-- 自定义的选择类型字段显示， 与type 区别-->
            <template
              v-else-if="column.formType === 'select' && !column.isSystem"
            >
              {{ scope.row.attribute[column.field] | displaySelect }}
            </template>

            <!-- 更新时间 -->
            <template v-else-if="column.field === 'updateTime'">
              <template v-if="scope.row.latesetUpdateRecord && !isOpenData">
                <el-tooltip
                  :content="scope.row.latesetUpdateRecord"
                  class="item"
                  effect="dark"
                  
                  placement="top"
                >
                  <div @mouseover="showLatestUpdateRecord(scope.row)">
                    {{ scope.row.updateTime | fmt_datetime }}
                  </div>
                </el-tooltip>
              </template>
              <template v-else>
                <div @mouseover="showLatestUpdateRecord(scope.row)">
                  {{ scope.row.updateTime | fmt_datetime }}
                </div>
              </template>
            </template>

            <template v-else-if="column.formType === 'logistics'">
              <biz-list-logistics-no
                :row="scope.row"
                :column="column"
                :is-link="isCanLogisticsNoLink(column)"
                mode="task"
                :biz-id="scope.row.id"
              />
            </template>
            <!-- 产品 -->
            <template v-else-if="column.field === 'product'">
              {{
                scope.row.products &&
                  scope.row.products
                    .map((product) => product.name)
                    .join(", ")
              }}
            </template>

            <!-- 创建人 和 负责人 、派单人 -->
            <template
              v-else-if="
                column.field === 'createUserName' ||
                  column.field === 'executorName' ||
                  column.field === 'allotName'
              "
            >
              <template v-if="permissionTaskView">
                <a
                  href=""
                  class="view-detail-btn view-user-detail-btn"
                  @click.stop.prevent="
                    openUserTab(
                      presonDisplayObj('userId', column.field, scope.row)
                    )
                  "
                >
                  <template v-if="isOpenData">
                    <template v-if="column.field === 'createUserName' && scope.row.createUser">
                      <open-data type="userName" :openid="scope.row.createUser.staffId"></open-data>
                    </template>  
                    <template v-else-if="column.field === 'executorName' && scope.row.executorUser">
                      <open-data type="userName" :openid="scope.row.executorUser.staffId"></open-data>
                    </template>  
                    <template v-else-if="column.field === 'allotName' && scope.row.allotUser">
                      <open-data type="userName" :openid="scope.row.allotUser.staffId"></open-data>
                    </template>  
                  </template>
                  <template v-else> 
                    {{
                      presonDisplayObj("displayName", column.field, scope.row)
                    }}
                  </template>
                  </a>
              </template>
              <template v-else>
                <template v-if="isOpenData">
                  <template v-if="column.field === 'createUserName' && scope.row.createUser">
                    <open-data type="userName" :openid="scope.row.createUser.staffId"></open-data>
                  </template>  
                  <template v-else-if="column.field === 'executorName' && scope.row.executorUser">
                    <open-data type="userName" :openid="scope.row.executorUser.staffId"></open-data>
                  </template>  
                  <template v-else-if="column.field === 'allotName' && scope.row.allotUser">
                    <open-data type="userName" :openid="scope.row.allotUser.staffId"></open-data>
                  </template>  
                </template>
                <template v-else> 
                  {{
                    presonDisplayObj("displayName", column.field, scope.row)
                  }}
                </template>
                </template>
            </template>

            <!-- 协同人 -->
            <template v-else-if="column.field === 'synergies'">
              <template v-if="isOpenData && scope.row[column.field]">
                <open-data v-for="synergie in scope.row[column.field]" :key="synergie.staffId" type="userName" :openid="synergie.staffId"></open-data>
              </template>
              <template v-else>
                {{
                  scope.row[column.field] &&
                    scope.row[column.field]
                      .map((synergie) => synergie.displayName)
                      .join(", ")
                }}
              </template>
            </template>
            
            <!-- 自定义人员 -->
            <template v-else-if="column.formType === 'user' && scope.row.attribute[column.field]">
              <template v-if="isOpenData">
                <open-data v-for="staffId in getUserIds(scope.row.attribute[column.field])" :key="staffId" type="userName" :openid="staffId"></open-data>
              </template>
              <template v-else>
                {{ getUserName(scope.row.attribute[column.field]) }}
              </template>
            </template>

            <!-- 客户产品关联字段 -->
            <template v-else-if="isOpenData && (column.formType === 'relationCustomer'|| column.formType === 'relationProduct') && column.setting && (column.setting.formType === 'user' || column.setting.fieldName === 'customerManager') && scope.row.attribute && scope.row.attribute[column.field]">
              <template v-if="column.setting.formType === 'user'">
                <open-data v-for="staffId in getRelationUserIds(scope.row.attribute[column.field])" :key="staffId" type="userName" :openid="staffId"></open-data>
              </template>
              <template v-else>
                <open-data type="userName" :openid="scope.row.attribute[column.field]"></open-data>
              </template>
            </template>

            <!-- 派单方式 -->
            <template v-else-if="column.field === 'allotTypeStr'">
              {{ allotTypeText(scope.row.allotType) }}
            </template>

            <!-- 服务部门(负责人所在的部门) -->
            <template v-else-if="column.field === 'executorTags'">
              {{ formatExecutorTags(scope.row[column.field]) }}
            </template>

            <!-- 审批状态 -->
            <template v-else-if="column.field === 'inApprove'">
              {{ scope.row.inApprove | displayApprove }}
            </template>
            <!-- 工单状态 -->
            <template v-else-if="column.field === 'state'">
              <!-- 自定义节点状态 -->
              <div
                class="task-state-block task-font12 table-blacklist"
                v-if="scope.row.attribute && scope.row.attribute.lastPassedNodeStateName"
                style="
                  color: #FFF;
                  background-color: rgb(255, 145, 0);
                "
              >
                {{scope.row.attribute.lastPassedNodeStateName}}
              </div>
              <!-- 暂停中 -->
              <div
                class="task-state-block task-font12 table-blacklist"
                v-else-if="scope.row.isPaused == 1"
                style="
                color: #FFF;
                background-color: rgba(255, 77, 79, 1);
              "
              >
                {{$t('task.list.paused')}}
              </div>
              <!-- 其他状态 -->
              <div
                v-else
                class="task-state-block task-font12 table-blacklist"
                :style="{
                  backgroundColor: taskStateEnum.getBgColor(
                    scope.row[column.field],
                    1
                  ),
                  color: '#FFF'
                }"
              >
                {{
                  scope.row[column.field] &&
                    taskStateEnum.getName(scope.row[column.field])
                }}
              </div>
            </template>

            <!-- 曾.. -->
            <template
              v-else-if="taskStatusFields.indexOf(column.field) > -1"
            >
              {{ Number(scope.row[column.field]) === 1 ? $t('common.base.yes') : $t('common.base.no') }}
            </template>
            <!-- 富文本 -->
            <template v-else-if="column.formType === 'richtext'">
              <div class='view-detail-btn' @click.stop="openRichtextVisible(scope.row, column)">
                <span v-if="scope.row.attribute && scope.row.attribute[column.field]">{{$t('common.base.view')}}</span>
              </div>
            </template>

            <!-- 地址 -->
            <template v-else-if="column.formType === 'address'">
              {{ formatCustomizeAddress(scope.row, column) }}
            </template>

            <!-- start 故障库 -->
            <template v-else-if="column.field === 'budgetAmountMax'">
              {{
                scope.row.esFaultLibrary && scope.row.esFaultLibrary.budgetAmountMax
              }}
            </template>
            <template v-else-if="column.field === 'budgetAmountMin'">
              {{
                scope.row.esFaultLibrary && scope.row.esFaultLibrary.budgetAmountMin
              }}
            </template>
            <template v-else-if="column.field === 'productType'">
              {{
                scope.row.esFaultLibrary && scope.row.esFaultLibrary.productType
              }}
            </template>
            <template v-else-if="column.field === 'faultReason'">
              {{
                scope.row.esFaultLibrary && scope.row.esFaultLibrary.faultReason
              }}
            </template>
            <template v-else-if="column.field === 'faultScene'">
              {{
                scope.row.esFaultLibrary && scope.row.esFaultLibrary.faultScene
              }}
            </template>
            <!-- end 故障库 -->

            <!-- start 服务商 -->
            <template v-else-if="column.field === 'serviceProviders'">
              {{
                scope.row.serviceProviderSubForm &&
                  scope.row.serviceProviderSubForm
                    .map((serviceProvider) => serviceProvider.providerName)
                    .join(", ")
              }}
            </template>
            <!-- end 服务商 -->

            <template v-else-if="column.formType === 'relationCustomer' && (column.setting || {}).formType === 'cascader'">
              {{ (scope.row[column.field] || scope.row.attribute[column.field]) | fmt_form_cascader((column.setting || {}).isMulti)}}
            </template>
            <template v-else-if="column.formType === 'relationProduct' && (column.setting || {}).formType === 'cascader'">
              <template v-for="(item, index) in (scope.row[column.field] || scope.row.attribute[column.field] || [])">
                {{index ? '、' : ''}}{{ item | fmt_form_cascader((column.setting || {}).isMulti)}}
              </template>
            </template>

            <!-- 表单设计器特殊控件 -->
            <template v-else-if="['cascader', 'select', 'user', 'related_task','relationProduct','location'].includes(column.formType)">
              {{ $formatFormField(column, scope.row) }}
            </template>

            <!-- 时间 -->
            <template v-else-if="column.formType === 'datetime'">
              <template v-if="!column.isSystem">
                {{
                  scope.row.attribute && scope.row.attribute[column.field]
                }}
              </template>
              <template v-else>
                {{ scope.row[column.field] | fmt_datetime }}
              </template>
            </template>

            <div
              v-else-if="column.formType === 'textarea'"
              v-html="buildTextarea(scope.row.attribute[column.field])"
              @click="openOutsideLink"
            ></div>

            <!-- 接单用时 -->
            <template v-else-if="column.field === 'acceptUsedTimeStr'">
              {{ scope.row.acceptUsedTime && scope.row.acceptUsedTime }}
            </template>
            <!-- 工单用时 -->
            <template v-else-if="column.field === 'taskUsedTimeStr'">
              {{ scope.row.taskUsedTime && scope.row.taskUsedTime }}
            </template>
            <!-- 工作用时 -->
            <template v-else-if="column.field === 'workUsedTimeStr'">
              {{ scope.row.workUsedTime && scope.row.workUsedTime }}
            </template>
            <!-- 响应用时 -->
            <template v-else-if="column.field === 'taskResponseTimeStr'">
              {{
                scope.row.taskResponseTime && scope.row.taskResponseTime
              }}
            </template>
            <!-- 响应用时 -->
            <template v-else-if="column.field === 'createToCompleteUsedTimeStr'">
              {{ scope.row.createToCompleteUsedTime && scope.row.createToCompleteUsedTime }}
            </template>
            <!-- 支付方式 -->
            <template
              v-else-if="
                column.field === 'paymentMethod' &&
                  initData.paymentConfig &&
                  initData.paymentConfig.version === 1
              "
            >
              {{
                scope.row.attribute && scope.row.attribute.paymentMethod
              }}
            </template>
            <template v-else-if="!column.isSystem">
              <template
                v-if="
                  scope.row.attribute &&
                    Array.isArray(scope.row.attribute[column.field])
                "
              >
                {{ scope.row.attribute[column.field].join(",") }}
              </template>
              <template v-else>
                {{
                  scope.row.attribute && scope.row.attribute[column.field]
                }}
              </template>
            </template>
            <!-- 里程 -->
            <template v-else-if="['taskEstimatedMileage','estimatedMileage','actualMileage'].includes(column.field)">
              {{ scope.row[column.field] || 0 }} km
            </template>

            <template v-else>
              {{ Array.isArray(scope.row[column.field]) ? scope.row[column.field].join(',') : scope.row[column.field] }}
            </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <BaseAddOnPagination :paginationInfo="searchModel" @pageJump="jump" @sizeChange="handleSizeChange" />

    <!-- start 选择列设置 -->
    <biz-select-column ref="advanced" @save="saveColumnStatus" />
    <!-- end 选择列设置 -->

    <!-- start 导出工单 -->
    <base-export-group
      ref="exportPanel"
      :storage-key="exportStorageKey"
      :alert="exportAlert"
      :columns="exportColumns"
      :build-params="buildExportParams"
      :group="true"
      :validate="checkExportCount"
      method="post"
      :action="taskListExport"
      :is-show-export-tip="isOpenData"
    />
    <!-- end 导出工单 -->

    <!-- 富文本弹窗 -->
    <base-modal :title="$t('task.list.richTextContent')" :show.sync="richtextVisible" width="600px" @close="richtextVisible = false">
      <div class="richtext-box">
        <BaseListForNoData v-if="!richtextContent" :notice-msg="$t('common.base.tip.noData')"></BaseListForNoData>
        <div class="richtext-content" v-else v-html="richtextContent"></div>
      </div>
    </base-modal>

    <p class="check-archive" v-if="shareData.archiveCount>0" @click="checkArchive">{{$t('customer.detail.customerTaskTable.checkArchive')}}</p>

    <archive-dialog
      ref="ArchiveDialog"
    ></archive-dialog>
  </div>
</template>

<script>
import CustomerTaskTable from './CustomerTaskTable.js'
export default CustomerTaskTable
</script>

<style lang="scss" scoped>
@import '@src/modules/task/list/TaskList.scss';
.check-archive{
  color: $color-primary;
  text-align: center;
  margin-bottom: 0;
  cursor: pointer;
}
</style>

<style lang="scss">
  .customer-task-table-container {
    padding: 16px;

    .action-button-group {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 12px;
      padding: 0;
    }

    .task-link {
      @include fontColor();
    }
  }

  td.customer-task-name-superscript-td {
    padding: 0 !important;

    & > .cell {
      padding-left: 0 !important;
    }

    & > div {
      height: 43px;
      line-height: 43px !important;
      a {
        display: inline-block;
        height: 43px;
        line-height: 43px;
      }
    }

  }
</style>
